<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		ul{
			width: 1000px;
			height: 200px;
			background: red url() 0 0 no-repeat;
		}

		ul li{
			width: 200px;
			height: 200px;
			margin-left: 20px;
			background: blue url() 0 0 no-repeat;
			float: left;
		}
		.brother{
			width: 200px;
			height: 200px;
			background: #A349A4 url() 0 0 no-repeat;
		}
		.son{
			width: 100px;
			height: 100px;
			background: #880015 url() 0 0 no-repeat;
		}
		#add{
			width: 100px;
			height: 100px;
			background: #FFAEC9 url() 0 0 no-repeat;
		}
		body{
			height: 3000px;
		}

		#goToTop{
			width: 50px;
			height: 50px;
			background: #3F48CC url() 0 0 no-repeat;
			position: fixed;
			right: 50px;
			bottom: 100px;
			display: none;
		}

	</style>
</head>
<body> 
	<ul>
		<li ><div class="box"></div></li>
		<li id='box'>
			<div id="son" class="son">box</div>
		</li>
		<li><div class="box"></div></li>
		<li><div class="box"></div></li>
	</ul>
	<div class="brother">
		
	</div>
	<div id ="add">
		
	</div>
	<div id="goToTop">
		
	</div>
	

	<script type="text/javascript">
		window.onscroll = function  (argument) {
			bodytop =document.body.scrollTop;
			document.title=bodytop;
			if(bodytop>600){
				goToTop = document.getElementById('goToTop');
				goToTop.style.display="block";

			}
		}

		goToTop = document.getElementById('goToTop');
		goToTop.onclick = function  (argument) {
			document.body.scrollTop=0;
		}


		// box = document.getElementById('box');
		// add = document.getElementById('add');

		// addclone = add.cloneNode();
		// son = document.getElementById('son');
		// add.onclick = function  (argument) {
		// 	box.appendChild(addclone);
		// }
		// pObj = document.createElement("p");
		// pObj.style.width="100px";
		// pObj.style.height="100px";
		// pObj.style.backgroundColor="#7F7F7F";
		




	</script>
</body>
</html>